<template>
	<section class="vbox">
		<section class="scrollable padder">
			<section class="panel panel-default m-t-sm">
				<header class="panel-heading">
					专辑
					<ul class="nav nav-tabs pull-right no-border">
						<li class="m-r-md m-t-xs">
							<el-select v-model="mediaType_q" clearable placeholder="媒体类型" @change="changeMediaType_q">
								<el-option v-for="item in mediaTypes" :key="item.code" :label="item.name" :value="item.code">
								</el-option>
							</el-select>
						</li>
						<li class="m-r-sm m-t-xs">
							<el-input placeholder="输入专辑名称" v-model="keywords" clearable>
								<template #append>
									<el-button slot="append" type="success" icon="icon-magnifier icon" @click="query(1)"></el-button>
								</template>
							</el-input>
							<!-- <div class="input-group">
								<input type="text" class="input-s form-control round" placeholder="输入标题关键字" v-model="keywords" @keyup.enter="query(1)">
								<span class="input-group-btn">
									<button class="btn bg-success" type="button" v-on:click="query(1)"><i class=" icon-magnifier icon"></i></button>
								</span>
							</div> -->
						</li>
						<li class="m-r-md m-t-xs">
							<el-button type="success" icon="fa fa-plus-circle" @click="dialogFormVisible = true"> 新增</el-button>
						</li>
					</ul>
				</header>
				<div class="panel-body">
					<div class="row row-sm">
						<el-row :gutter="10">
							<el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="3" v-for="(item, index) in albumList" :key="index">
								<div class="item">
									<div class="pos-rlt">
										<div class="top">
											<div class="text-warning padder m-t-sm text-sm">
												<i class="fa fa-star"></i>
												<i class="fa fa-star"></i>
												<i class="fa fa-star"></i>
												<i class="fa fa-star-o text-muted"></i>
												<i class="fa fa-star-o text-muted"></i>
											</div>
										</div>
										<div class="bottom m-b-sm pos-rlt">
											<span class="badge bg-dark m-l-sm m-t-sm">{{ item.updateTime }}</span>
											<div class="item-overlay r r-2x">
												<div class="center text-center m-t-n bg-light">
													<div class="btn-group btn-group-justified">
														<a href="javascript:void(0)" @click="deleteAlbum(item.id)" class="btn btn-primary">删除</a>
														<a href="javascript:void(0)" @click="openEditDialog(item.id)" class="btn btn-info">编辑</a>
														<a href="javascript:void(0)" class="btn btn-success">列表</a>
													</div>
												</div>
											</div>
										</div>
										<!-- style="height: 200px;" -->
										<img :src="$api.file.url.view + item.poster" alt="" class="r r-2x img-full center-block">
									</div>
									<div class="padder-v">
										<span>{{ item.title }}</span>
										<span href="#" class="text-ellipsis text-xs text-muted">{{ item.updateTime }}</span>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>

					<el-pagination background layout="prev, pager, next" :pager-count="5" :total="total" :page-size="pageSize"
					 @current-change="query">
					</el-pagination>

					<album-form :id="selectedId" :visibled="dialogFormVisible" @close="closeDialog" @refreshList="refreshList"></album-form>
				</div>
			</section>
		</section>
	</section>
</template>

<script>
	import {
		isInteger
	} from '@/utils'
	import AlbumForm from './AlbumForm'

	export default {
		components: {
			AlbumForm
		},
		data() {
			return {
				dialogFormVisible: false,
				mediaTypes: [],
				selectedIds: [],
				albumList: [],
				total: 0, // 记录总条数
				pageSize: 16, // 每页显示条数
				pageNo: 1, // 当前的页数
				keywords: '',
				mediaType_q: '',
				publish_q: '',
				selectedId: null
			}
		},
		mounted() {
			this.$api.sysDict.queryDictItems("media_type").then(data => {
				this.mediaTypes = data;
			});

			this.query(1);
		},
		methods: {
			indexMethod(index) {
				return this.pageSize * (this.pageNo - 1) + index + 1;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formatterMediaType(row, column, cellValue, index) {
				return this.parseSysDict(cellValue, this.mediaTypes);
			},
			query(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.album.query({
					title: this.keywords,
					mediaType: this.mediaType_q,
					publish: this.publish_q,
					pageSize: this.pageSize,
					pageNo: this.pageNo
				}).then(data => {
					this.albumList = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			},
			openEditDialog(id) {
				this.selectedId = id;
				this.dialogFormVisible = true;
			},
			deleteAlbum(id) {
				this.$confirm('您确定要执行删除操作吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api.album.delete(id).then(data => {
						if (1 == data.code) {
							this.query(this.pageNo);
						}
					});
				});
			},
			showDetail(mediaType, id) {
				console.debug('id', id);
				this.$router.push({
					path: '/' + mediaType + '/' + id,
					params: {
						// action: 'add'
					}
				});
			},
			publishMedia(e, item) {
				this.$api[item.mediaType].update(item);
			},
			changePublish_q(publishState) {
				this.publish_q = publishState;
				this.query(1);
			},
			changeMediaType_q(mediaType) {
				this.albumList = [];
				this.query(1);
			},
			closeDialog(model) {
				console.debug("model.id", model.id);
				this.dialogFormVisible = false;
				this.selectedId = null;
				if (model.id != undefined) {
					this.query(1);
				}
			},
			refreshList() {
				this.query(this.pageNo);
			},
			parseSysDict(key, data) {
				// console.debug('filter key:', key);
				var name = "其他";
				// console.debug('data:', data);
				for (let i = 0; i < data.length; i++) {
					// console.debug('data[i].code:', data[i].code);
					if (data[i].code == key) {
						name = data[i].name;
						// console.debug('name:', name);
						break;
					}
				}
				// console.debug('filter name:', name);
				return name;
			}
		}
	}
</script>

<style>
	.th-btn {
		border: 1px solid transparent;
		background-color: transparent;
		padding: 0;
	}
</style>
